<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./OL_SDK/include-openlayers-local.js"></script>
    <script src="./libs/gaode.js"></script>
    <!-- 2、popup-DOM-CSS -->
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* ---------------最外侧的弹框容器--------------------------- */
        .ol-popup {
            width: 100px;
            height: 100px;
            position: absolute;
            background-color: white;
            /* -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2)); */
            /* filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2)); */
            padding: 15px;
            /* border-radius: 10px; */
            /* border: 1px solid #cccccc; */
            /* bottom: 45px; */
            /* left: -50px; */
        }

        /* ----------------------这两个after和before是下方的小尖尖------------------ */
        .ol-popup:after,
        .ol-popup:before {
            top: 100%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }

        .ol-popup:after {
            border-top-color: white;
            border-width: 10px;
            left: 29px;
            margin-left: -10px;
        }

        .ol-popup:before {
            border-top-color: #cccccc;
            border-width: 11px;
            left: 29px;
            margin-left: -11px;
        }

        /* ---------关闭按钮------------------------------------------------------ */
        .ol-popup-closer {
            text-decoration: none;
            position: absolute;
            top: 2px;
            right: 8px;
        }

        .ol-popup-closer:after {
            content: "✖";
        }

        /* ------------弹框的内容部分----------------------------------------------- */
        #popup-content {
            font-size: 14px;
            font-family: "微软雅黑";
        }
    </style>
</head>

<body>
    <!-- 1、创建DOM -->
    <div id="popup" class="ol-popup">
        <a href="#" id="popup-closer" class="ol-popup-closer"></a>
        <div id="popup-content">
            武汉
        </div>
    </div>
    <div id="map">
    </div>
    <script>
        var map = new ol.Map({
            target: "map",
            layers: [gaode],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [114.30, 30.50],
                zoom: 4
            })
        })
        /* popup

        解释地物(要素)
         */
        /* 构建要素 */
        const style = new ol.style.Style({
            /**{olx.style.IconOptions}类型*/
            image: new ol.style.Icon({
                anchor: [0.5, 1],
                // anchor: [0.5, 48],// 这个单位是像素时，
                // 是按照原图像未缩放的时候的像素宽高进行这个点在图片中的摆放位置。
                anchorOrigin: 'top-right',
                anchorXUnits: 'fraction',
                anchorYUnits: 'fraction',
                // anchorYUnits: 'pixels',
                offsetOrigin: 'top-right',
                // offset:[0,10],
                //图标缩放比例
                scale: 0.5,
                //透明度
                opacity: 0.75,
                //图标的url
                src: '/images/location.png',
            }),
        })
        const point = new ol.Feature({
            geometry: new ol.geom.Point([114.30, 30.50]),
        })
        const point2 = new ol.Feature({
            geometry: new ol.geom.Point([114.30, 30.50]),
        })
        point.setStyle(style)
        /* layer-source */
        let source = new ol.source.Vector({

        })
        source.addFeatures([point, point2])
        let layer = new ol.layer.Vector({

        })
        layer.setSource(source);
        layer.setMap(map);


        /* 3、获取DOM */
        /**
      * 实现popup的html元素
      */
        var container = document.getElementById('popup');
        var content = document.getElementById('popup-content');
        var closer = document.getElementById('popup-closer');

        /**
        * 在地图容器中创建一个Overlay
        */
        var popup = new ol.Overlay(
            /** @type {olx.OverlayOptions} */
            ({
                //要转换成overlay的HTML元素
                element: container,
                //当前窗口可见(自动平移)
                autoPan: true,
                offset: [-30, -130],// 这个popup外侧有一个宽高为0的绝对定位的父元素
                // 此处offset移动的是这个绝对定位的父元素的位置。
                //Popup放置的位置
                positioning: 'bottom-center',
                // positioning: 'top-left',
                //是否应该停止事件传播到地图窗口
                stopEvent: false,
                // 自动平移动画
                autoPanAnimation: {
                    //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度
                    duration: 250
                }
            }));
        map.addOverlay(popup);

        /* 事件监听 */
        /* 鼠标移动到要素上,显示小手(cursor：pointer）*/
        map.on('pointermove', function (e) {
            var pixel = map.getEventPixel(e.originalEvent);
            var hit = map.hasFeatureAtPixel(pixel);
            map.getTargetElement().style.cursor = hit ? 'pointer' : '';
        });
        /* 点击要素,获取要素点的位置,将popup显示到对应位置 */
        map.on('click', function (evt) {
            //判断当前单击处是否有要素，捕获到要素时弹出popup
            var feature = map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) { return feature; });
            if (feature) {
                console.log(feature, 'feature')
                if (popup.getPosition() == undefined) {
                    //设置popup的位置
                    let coordinates = feature.getGeometry().getCoordinates();
                    // console.log(coordinates);
                    popup.setPosition(coordinates);
                }
            }
        });
        /* 3、关闭popup弹窗 */
        closer.onclick = function () {
            //未定义popup位置
            popup.setPosition(undefined);
            //失去焦点
            closer.blur();
            return false;
        };
    </script>
</body>

</html>